<!-- 考试记录 -->
<template>
    <div class="app-container">
        <el-row>
            <el-form ref="form" :model="form" label-width="80px" style="height: 100px; margin: 10px">
                <el-row :gutter="24">
                    <el-col :span="4">
                        <el-form-item label="卷名">
                            <el-input v-model="seaechParams.examPaperName"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="姓名">
                            <el-input v-model="seaechParams.userName"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-form-item label="完成时间">
                        <el-col :span="4">
                            <el-date-picker v-model="seaechParams.startDate" align="right" type="date" placeholder="开始日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="4">
                            <el-date-picker v-model="seaechParams.endDate" align="right" type="date" placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-row>
        <el-row :gutter="12">
            <el-col :span="2" :offset="20">
                <el-button type="primary" @click="searchTable(form)">搜索</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="emptySearch(form)">重置</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="userName" label="用户名" align="center"> </el-table-column>
                <el-table-column prop="examPaperName" label="卷名" align="center"> </el-table-column>
                <el-table-column prop="resultScore" label="成绩" align="center">
                </el-table-column>
                <el-table-column prop="passMark" label="及格分数" align="center">
                </el-table-column>
                <el-table-column prop="isPass" label="及格状态" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isPass === 1">及格</el-tag>
                        <el-tag type="danger" v-else>未及格</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="errorQuestion" label="错题数" align="center"> </el-table-column>
                <el-table-column prop="correctQuestion" label="正确题数" align="center"> </el-table-column>
                <el-table-column prop="resultTime" label="考试耗时" align="center"> </el-table-column>
                <el-table-column prop="createTime" label="完成时间" align="center"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-col>
                <pagination :pageNum="seaechParams.current" :total="total" :pageSize="seaechParams.size"
                    @sizeChange="sizeChange" @currentChange="currentChange"></pagination>
            </el-col>
        </el-row>
        <el-dialog title="答题详情" :visible.sync="dialogVisible" fullscreen width="30%">
      <el-col>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item v-for="(item, index) in questionList" :key="index" :name="index">
            <template slot="title">
              {{ item.content }}<i class="header-icon el-icon-info"></i>
            </template>
            <div><el-tag type="success">题目答案：</el-tag></div>

            <div v-if="item.quType === 1 || item.quType === 3">
              <el-radio-group :v-model="q.answerCorrect==1?q.quId:0" size="small">
                <div v-for="(q, index) in item.quAnswers" :key="index">
                  <el-radio  :label=q.quId  border>{{ q.quAnswerContent }} </el-radio>
                </div>
              </el-radio-group>
            </div>
            <div v-else-if="item.quType === 2">
              <el-checkbox-group v-model="checkList">
                <div v-for="(q, index) in item.quAnswers" :key="index">
                  <el-checkbox :label=q.quAnswerContent border :checked="q.answerCorrect == 1">
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
            <div v-else-if="item.quType === 4">

            </div>
            <div><el-tag>题目解析：</el-tag></div>
            <div>{{ item.analysis }}</div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-dialog>
    </div>
</template>
<script>
import Pagination from "@/components/Pagination/pagination.vue";
import { queryExamResultList } from '@/api/onlineQuestion/paperQuestion'
export default {
    components: {
        Pagination
    },
    data() {

        return {
            dialogVisible: false,
            activeNames:[],
            questionList:[],
            tableData: [],
            total: 1,
            seaechParams: {
                current: 1,
                size: 10,
                examPaperName: '',
                userName: '',
                startDate: '',
                endDate: ''
            },
            form: {},
            questionList: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },

        }
    },
    created() {
        this.queryExamResultList();

    },
    methods: {
        handleChange(){
            
        },
        //查看详情
        handleClick(row) {
            this.$router.push({ name: 'paperResult', params: { examResultId: row.examResultId }, })
        },
        // 点击页码及上一页下一页按钮操作
        currentChange(val) {
            this.seaechParams.current = val;
            //刷新表格
        },
        //每页展示几条按钮操作
        sizeChange(val) {
            this.seaechParams.size = val;
            //刷新表格
        },
        queryExamResultList() {
            queryExamResultList(JSON.stringify(this.seaechParams)).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }
            });

        },
        // 搜索
        searchTable() {

            this.queryExamResultList();
        },
        // 清空查询
        emptySearch() {
            this.seaechParams.examPaperName = '';
            this.seaechParams.userName = '';
            this.seaechParams.startDate = '';
            this.seaechParams.endDate = '';
            this.queryExamResultList();
        },
    },


}
</script>

<style>
.title {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 10px;
    padding-top: 20px;
    margin-bottom: 10px;
    border-bottom: #eee 1px dotted;
}

.tags span {
    margin-right: 10px;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: hwb(210 95% 5%);
}

.bg-purple {
    border: 0px solid cornflowerblue;
    height: 200px;
}

.app-container {
    height: 100%;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
}
</style>